﻿@{
    ViewData["Title"] = "角色管理";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div id="appRole" style="margin:2px;padding:2px;">
    <el-form inline label-position="right" label-width="70px" class="query-form">
        <el-form-item label="角色名称">
            <el-input placeholder="请输入角色名称" style="width:150px;" v-model="roleName"></el-input>
        </el-form-item>
        @*<el-form-item label="状态">
            <el-select v-model="enabled">
                <el-option label="全部" value="null"></el-option>
                <el-option label="启用" value="true"></el-option>
                <el-option label="禁用" value="false"></el-option>
            </el-select>
        </el-form-item>*@
        <el-form-item>
            @*<el-button type="success" size="small" @@click="roleEdit(null)">新增</el-button>*@
            <el-button type="primary" size="small" @@click="handleSearch">查询</el-button>
        </el-form-item>
    </el-form>
    <el-table :data="tableData" stripe border style="width:100%" size="mini">
        <el-table-column type="index" width="50" align="center"></el-table-column>
        <el-table-column prop="roleName" label="角色编码" width="180"></el-table-column>
        <el-table-column prop="roleName" label="角色名称" width="180"></el-table-column> 
        <el-table-column prop="orderIndex" label="排序" width="180"></el-table-column>
        <el-table-column prop="remark" label="备注" width="280"></el-table-column>
        <el-table-column label="状态" width="100" align="center">
            <template slot-scope="scope">
                <el-button type="success" round size="mini" v-if="scope.row.enabled==true">{{scope.row.enabled === false ? '禁用' : '启用'}}</el-button>
                <el-button type="danger" round size="mini" v-if="scope.row.enabled==false">{{scope.row.enabled === false ? '禁用' : '启用'}}</el-button>
            </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="200" align="center">
        </el-table-column>
        <el-table-column prop="updateTime" label="修改时间" width="200" align="center">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="450" align="center">
            <template slot-scope="scope">
                @*<el-button :type="scope.row.enabled === true?'danger':'success'" @@click="SetEnabled(scope.row)" size="mini">
                    <span>{{scope.row.enabled === true ? '禁用' : '启用'}}</span>
                </el-button>*@
                <el-button type="primary" size="mini" @@click="roleEdit(scope.row )" v-show="pageButtons.includes('viewrole')">查看</el-button> 
                <el-button type="info" size="mini" @@click="BandMenus(scope.row )" v-show="pageButtons.includes('setrole')">设置权限</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination @@size-change="handleSizeChange"
                   @@current-change="handleCurrentChange"
                   :current-page="currentPage"
                   :page-sizes="[10, 20, 50, 100]"
                   :page-size="10"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total">
    </el-pagination>

   

    <el-dialog :title="bandMenuTitle"
               :visible.sync="menudialogVisible"
               width="50%" border="true">
        <el-tree :data="menuData"
                 show-checkbox
                 node-key="id"
                 ref="tree"
                 default-expand-all
                  style="height: 450px; overflow: auto">
        </el-tree>
        <span slot="footer" class="dialog-footer">
            <el-button @@click="menudialogVisible = false">取 消</el-button>
            <el-button type="primary" @@click="SaveRoleMenus()">确 定</el-button>
        </span>
    </el-dialog>
</div>
<style>
    .el-checkbox {
        margin-bottom: 10px !important;
    }

    .chktext {
        white-space: normal;
        word-break: break-all;
        width: 150px;
    }
</style>
<script>
    function refreshFromChild() {
        vueRole.GetRolerList();
    }

    var vueRole = new Vue({
        el: '#appRole',
        data() {
            return {
                pageButtons: [],

                roleName: '',
                enabled:'null',
                pageSize: 10,
                currentPage: 1,
                total: 0,
                tableData: [],

             

                menuData:[],
                menudialogVisible: false,
                bandMenuTitle:"绑定权限",

                selectRoleId:0,
            }
        },
        created(){
            var _this = this;
            this.GetRolerList();

            _this.$getMenuButtons();
        },
        methods: {
            
            roleEdit(row) {
                var id = 0;
                if (row) id = row.id;
                this.$addTab(id, id == 0 ? "新增项目" : "修改项目", "../role/edit?id=" + id);
            },
             projectDetail(row ) {
                 this.$addTab(row.id, "项目详情", "../role/detail?id=" + row.id);
            },
            tableRowClassName({ row, rowIndex }) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            handleSearch() {
                this.GetRolerList();
            },
            handleClick(row) {
                console.log(row);
            },
            GetRolerList() {
                  var _this = this;
                 _this.$post("@Url.Action("GetRolePageList", "Role")", {
                     PageIndex: _this.currentPage,
                     PageSize: _this.pageSize,
                     roleName: _this.roleName,
                     enabled: _this.enabled == 'null' ? null : _this.enabled =="true"?true:false
                 }).then((response) => {
                        _this.tableData = response.items;
                        _this.total = response.totalCount;
                  }).catch((error) => {
                  });
            },
            SetEnabled(row) {
                  var _this = this;
                  axios.post("@Url.Action("SetEnabled", "Role")", {
                      RoleId: row.id,
                      Enabled: !(row.enabled)
                  }).then((res) => {
                      _this.$success(res.message, function () {
                          if(res.success)
                              _this.GetRolerList();
                      });


                  }).catch((error) => {
                  });
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.GetRolerList();
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.GetRolerList();
            },
            BandMenus(row) { 
                var _this = this;
                _this.bandMenuTitle = "【"+row.roleName+"】 绑定权限";
                _this.selectRoleId = row.id;
                _this.getAllMenu();
                _this.menudialogVisible = true;
                if (_this.$refs != undefined && _this.$refs.tree != undefined && _this.$refs.tree.setCheckedKeys != undefined ) _this.$refs.tree.setCheckedKeys([]);
                _this.$nextTick(() => {
                  
                    _this.getRoleBandMenus();
                   
                }) 
              
            },
            getAllMenu() {
                  var _this = this;
                _this.$get("@Url.Action("GetAllMenu", "Role")").then((response) => {
                    _this.menuData = response; 
                   
                
                  }).catch((error) => {
                  });
            },
            getRoleBandMenus() {
                 var _this = this;
                _this.$get("@Url.Action("GetRoleMenuIds", "Role")?roleId=" + _this.selectRoleId ).then((response) => {
                    _this.$refs.tree.setCheckedKeys(response);
                  }).catch((error) => {
                  });
            },
            SaveRoleMenus() {
                var menus = this.$refs.tree.getCheckedNodes();
                var halfCheckMenus = this.$refs.tree.getHalfCheckedNodes();
                if (menus != null && halfCheckMenus!=null) {
                    for (var item of halfCheckMenus) {
                        menus.push(item);
                    }
                }

                var _this = this;
                _this.$post("@Url.Action("BandRoleMenus", "Role")", {
                    roleId: _this.selectRoleId,
                    items: menus,
                 }).then((res) => {
                     _this.$success(res.message, function () {
                         _this.menudialogVisible = false;
                         _this.GetRolerList();
                     });
                  }).catch((error) => {
                  });
            }
        }
    });
</script>
